<template style="width: 913px">
  <!-- 头部导航 -->
  <el-header style="padding: 0;margin: 0">
    <el-affix :offset="0">
      <div id="headDiv">
        <div>
          <el-button type="warning" size="large" style="margin-left: 40px" @click="$router.push('admin')" round>
            <el-icon>
              <House/>
            </el-icon>
            首页
          </el-button>
        </div>
        <div>
          <span style="color: #626262;margin-right: 20px">您好!</span>
          <el-button type="primary" size="large" @click="$router.push('returnOrderAudit')" round>退货订单审核
          </el-button>
          <el-button size="large" type="danger" style="margin-right: 20px" @click="exitUser()" round>退出登录
          </el-button>
        </div>
      </div>
    </el-affix>
  </el-header>
  <!-- 头部导航end -->

  <!-- 商城logo -->
  <div style="width: 1800px;margin: 0 auto;height: 60px">
    <div style="font-size: 30px;margin: 20px 0">
      <a href="#" style="color:#545454;text-decoration: none;">LO<span style="color: #c4c4c4">V</span><span>O</span> |
        朗沃商城</a>
    </div>
  </div>
  <!-- 商城logo end -->

  <!-- 展示部分 -->
  <div style="display: flex;">
    <!-- echarts图部分 -->
    <div style="display: flex; height: 420px">
      <PieEcharts ref="categoryPie" chart-title="销售类别统计" :chart-data="categoryList" width="600px" height="400px"/>
    </div>
    <!-- echarts图部分end -->

    <!-- 查询部分 -->
    <div>
      <h3>查询销售统计信息</h3><br>
      <el-form :model="data" ref="data" class="demo-ruleForm" label-position="left"
               label-width="90px">
        <el-form-item prop="startTime" label="起始日期">
          <el-date-picker v-model="data.startTime" type="datetime" value-format="YYYY-MM-DD hh:mm:ss"
                          placeholder="请选择起始日期"
                          style="width: 160px"/>
        </el-form-item>
        <el-form-item prop="endTime" label="结束日期">
          <el-date-picker v-model="data.endTime" type="datetime" value-format="YYYY-MM-DD hh:mm:ss"
                          placeholder="请选择结束日期"
                          style="width: 160px"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset()">重置</el-button>
          <el-button @click="search()" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 查询部分end -->
  </div>
  <!-- 展示部分end -->
</template>

<script>
import PieEcharts from "@/components/PieEcharts.vue";
import axios from 'axios'
import {ElMessage} from "element-plus"

export default {
  name: "Statistics",
  created() {
    let admin = sessionStorage.getItem("adminNo");
    if (admin == null) {
      this.$router.push("newLogin");
    } else {
      this.admin = admin;
    }
    this.config = {
      headers: {
        'admin': this.admin
      }
    };
    this.loadData();
  },
  components: {
    PieEcharts
  },
  data() {
    return {
      categoryList: [],
      data: {
        startTime: "",
        endTime: ""
      }
    }
  },
  methods: {
    // 加载数据
    loadData() {
      // 重置展示数据
      this.categoryList = [];
      axios.post("/api/info/querySaleInfo", {
        beginTime: this.data.startTime,
        endTime: this.data.endTime,
      }, this.config).then(response => {
        console.log(response.data.data);
        if (response.data.code === 200) {
          this.categoryList = response.data.data;
        } else {
          ElMessage.error(response.data.msg);
        }
      });
    },
    //查询数据
    search() {
      this.loadData();
    },
    // 重置条件
    reset() {
      this.$refs.data.resetFields();
      this.loadData();
    },
    // 退出登录
    exitUser() {
      sessionStorage.clear();
      this.$router.push("newLogin")
    }
  }
}
</script>

<style scoped>

</style>